<template>
	<view class="page-wrapper">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-container">
			<view class="main-content">
				<!-- 左侧栏 - 个人和宠物信息 -->
				<view class="left-column">
					<!-- 个人信息卡片 -->
					<view class="info-card" @click="navigateToUserDetail">
						<view class="card-header">
							<text class="card-title">个人资料</text>
							<text class="edit-link">编辑</text>
						</view>
						<view class="info-content">
							<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
							<view class="user-info">
								<text class="name">{{userName}}</text>
								<text class="signature">{{signature}}</text>
							</view>
						</view>
					</view>

					<!-- 宠物信息卡片 -->
					<view class="info-card" @click="navigateToPetDetail">
						<view class="card-header">
							<text class="card-title">我的宠物</text>
							<text class="edit-link">管理</text>
						</view>
						<view class="info-content">
							<image class="avatar" :src="petAvatar" mode="aspectFill"></image>
							<view class="pet-info">
								<text class="name">{{petName || '添加宠物'}}</text>
								<view class="pet-details" v-if="petName">
									<view class="pet-detail-item">
										<text class="detail-label">种类:</text>
										<text class="detail-value">{{petType}}</text>
									</view>
									<view class="pet-detail-item">
										<text class="detail-label">体重:</text>
										<text class="detail-value">{{petWeight}}</text>
									</view>
									<view class="pet-detail-item">
										<text class="detail-label">年龄:</text>
										<text class="detail-value">{{petAge}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 右侧栏 - 设置和操作 -->
				<view class="right-column">
					<!-- 设置卡片 -->
					<view class="settings-card">
						<view class="card-header">
							<text class="card-title">设置</text>
						</view>
						<view class="settings-list">
							<view class="setting-item">
								<text class="setting-icon">🎨</text>
								<text class="setting-text">主题设置</text>
								<text class="setting-arrow">›</text>
							</view>
							<view class="setting-item">
								<text class="setting-icon">💬</text>
								<text class="setting-text">意见反馈</text>
								<text class="setting-arrow">›</text>
							</view>
							<view class="setting-item">
								<text class="setting-icon">🔒</text>
								<text class="setting-text">修改密码</text>
								<text class="setting-arrow">›</text>
							</view>
							<view class="setting-item">
								<text class="setting-icon">ℹ️</text>
								<text class="setting-text">关于我们</text>
								<text class="setting-arrow">›</text>
							</view>
						</view>
						<view class="logout-container">
							<button class="logout-btn" @click="logout">退出登录</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi
	} from '@/api/user.js'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				userName: '',
				userAvatar: '',
				signature: '',
				petName: '',
				petAvatar: '',
				petType: '',
				petWeight: '',
				petAge: '',
				userId: '',
			};
		},
		mounted() {
			this.userId = uni.getStorageSync('userId')
			this.getUserInfo()
			this.getPetInfo()
		},
		methods: {
			navigateToUserDetail() {
				uni.redirectTo({
					url: '/pages/mine/mineInfo'
				})
			},
			navigateToPetDetail() {
				uni.redirectTo({
					url: '/pages/mine/petInfo'
				})
			},
			async getUserInfo() {
				try {
					const result = await userApi.getUserInfo()
					this.userName = result.username
					this.userAvatar = result.avatar
					this.signature = result.introduce || '这个人很懒，什么都没有留下~'
					console.log('获取用户信息成功：', this.userAvatar);
				} catch (error) {
					uni.showToast({
						title: '获取用户信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取用户信息失败：', error);
				}
			},
			async getPetInfo() {
				try {
					const result = await userApi.getPetInfo({
						userId: this.userId
					})
					if (result) {
						this.petName = result.petName
						this.petAvatar = result.avatar
						this.petType = result.petType
						this.petWeight = result.petWeight
						this.petAge = result.petAge
					} else {
						this.petName = '快去完善宠物信息吧~'
						this.petAvatar = ''
						this.petType = '快去完善宠物信息吧~'
						this.petWeight = '快去完善宠物信息吧~'
						this.petAge = '快去完善宠物信息吧~'
					}

					console.log('获取宠物信息成功：', result);
				} catch (error) {
					uni.showToast({
						title: '获取宠物信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取宠物信息失败：', error);
				}
			},
			async logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							try {
								const result = userApi.logout()
								console.log('退出登录成功：', result);
							} catch (error) {
								console.error('退出登录失败：', error);
							}
							// 清除登录状态
							uni.removeStorageSync('token');
							// 返回登录页
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
		}
	};
</script>

<style scoped>
	.page-wrapper {
		min-height: 100vh;
		/* background-color: #f7f9fc; */
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	.page-container {
		max-width: 1200px;
		margin-top: 270rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 30px 20px;
	}

	.main-content {
		display: flex;
		flex-direction: row;
		gap: 30px;
	}

	/* 左右列布局 */
	.left-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.right-column {
		width: 350px;
	}

	/* 卡片样式 */
	.info-card,
	.settings-card {
		background-color: white;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.info-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

	/* 卡片标题 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid #eaedf2;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.edit-link {
		font-size: 14px;
		color: #4a89dc;
		cursor: pointer;
	}

	/* 个人信息部分 */
	.info-content {
		display: flex;
		padding: 24px 20px;
		align-items: center;
	}

	.avatar {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #f1f5fa;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.user-info,
	.pet-info {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		flex: 1;
	}

	.name {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 8px;
		color: #2c3e50;
	}

	.signature {
		font-size: 14px;
		color: #7f8c8d;
		line-height: 1.5;
	}

	/* 宠物信息部分 */
	.pet-details {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 12px;
		margin-top: 10px;
	}

	.pet-detail-item {
		display: flex;
		align-items: center;
	}

	.detail-label {
		font-size: 14px;
		color: #95a5a6;
		margin-right: 4px;
	}

	.detail-value {
		font-size: 14px;
		color: #34495e;
		font-weight: 500;
	}

	/* 设置列表 */
	.settings-list {
		padding: 10px 0;
	}

	.setting-item {
		display: flex;
		align-items: center;
		padding: 14px 20px;
		transition: background-color 0.2s;
		cursor: pointer;
	}

	.setting-item:hover {
		background-color: #f7f9fc;
	}

	.setting-icon {
		margin-right: 12px;
		font-size: 18px;
		width: 24px;
		text-align: center;
	}

	.setting-text {
		flex: 1;
		font-size: 16px;
		color: #2c3e50;
	}

	.setting-arrow {
		color: #bdc3c7;
		font-size: 20px;
		font-weight: 300;
	}

	/* 退出登录按钮 */
	.logout-container {
		padding: 20px;
		border-top: 1px solid #eaedf2;
	}

	.logout-btn {
		width: 100%;
		height: 44px;
		background-color: #ff6b6b;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		transition: background-color 0.3s;
		cursor: pointer;
	}

	.logout-btn:hover {
		background-color: #ff5252;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.main-content {
			flex-direction: column;
		}

		.right-column {
			width: 100%;
		}

		.pet-details {
			grid-template-columns: 1fr 1fr;
		}
	}
</style>